<template>
  <div class="app-container">
    <el-row>
      <el-form :inline="true" :model="cartForm" class="demo-form-inline">
        <el-col :span="24"><div class="grid-content bg-purple-dark bg-purple-dark-Top">
          <el-row type="flex" class="row-bg">
            <el-col :span="8"><div class="grid-content bg-purple">
              <el-form-item label="运输任务编号:">
                <el-input v-model="cartForm.transportTaskId" placeholder="请输入运输任务编号" />

              </el-form-item>
            </div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple-light">
              <el-form-item label="请选择起始机构:">
                <div>
                  <el-select
                    v-model="startAgency"
                    clearable
                    :value="cartForm.startAgencyId"
                    placeholder="请选择起始机构"
                  >
                    <el-option
                      v-for="node in data"
                      :key="node.id"
                      :label="node.label"
                      :value="node.id"
                      style="display: none;"
                    />
                    <el-tree
                      v-model="selectedNodeId"
                      class="main-select-el-tree"
                      :data="data"
                      :props="defaultProps"
                      check="checkedNodes"
                      @node-click="beginPlace"
                    />
                  </el-select>
                </div>
              </el-form-item>
            </div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple-light">
              <el-form-item label="目的地机构:">
                <div>
                  <el-select
                    v-model="endAgency"
                    clearable
                    :vaule="cartForm.endAgencyId"
                    placeholder="请选择目的地机构"
                  >
                    <el-option
                      v-for="node in data"
                      :key="node.id"
                      :label="node.label"
                      :value="node.id"
                      style="display: none;"
                    />
                    <el-tree
                      v-model="selectedNodeId"
                      class="main-select-el-tree"
                      :data="data"
                      :props="defaultProps"
                      check="checkedNodes"
                      @node-click="endPlace"
                    />
                  </el-select>
                </div>
              </el-form-item>
            </div></el-col>

          </el-row>
          <el-row type="flex" class="row-bg row-bg2">
            <el-col :span="8"><div class="grid-content bg-purple">
              <el-form-item label="回车时间:">
                <div class="block">
                  <!-- <span class="demonstration" /> -->
                  <el-date-picker
                    v-model="time"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :default-time="['00:00:00']"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                  />
                </div>
              </el-form-item>
            </div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple">
              <el-form-item label="车辆是否可用:">
                <el-select v-model="cartForm.isAvailable" clearable placeholder="请选择">
                  <el-option
                    v-for="item in cart_isAvailable"
                    :key="item.id"
                    :label="item.name"
                    :value="item.value"
                  />

                </el-select>
              </el-form-item>
            </div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple-light">
              <el-form-item>
                <el-button type="primary" @click="inquire">查询</el-button>
              </el-form-item>
              <el-form-item>
                <el-button native-type="reset" @click="reset">重置</el-button>
              </el-form-item>
            </div></el-col>
          </el-row>
        </div></el-col>
      </el-form>
    </el-row>
    <el-row class="row-bg3">
      <el-col :span="24"><div class="grid-content bg-purple-dark remainder">

        <el-table
          v-loading="loading"
          :data="tableData"
          stripe
          style="width: 100%"
        >
          <el-table-column
            prop="transportTaskId"
            label="运输任务编号"
          />
          <el-table-column
            prop="startAgencyName"
            label="起始地机构"
          />
          <el-table-column
            prop="endAgencyName"
            label="目的地机构"
          />
          <el-table-column
            prop="transportOrderNumber"
            label="运单数量"
          />
          <el-table-column
            prop="outStorageTime"
            label="出车时间"
          />
          <el-table-column
            prop="intoStorageTime"
            label="回车时间"
          />
          <el-table-column
            prop="licensePlate"
            label="车牌号码"
          />
          <el-table-column
            prop="isAvailable"
            label="车辆是否可用"
          >

            <template v-slot="{row}">
              <div v-if="row.isAvailable===true" style="display: flex; align-items:center">
                <div class="available" /><span>可用</span>
              </div>
              <div v-else style="display: flex; align-items: center;">
                <div class="notavailable" /><span>停用</span>
              </div>

            </template>
          </el-table-column>

          <el-table-column
            align="center"
            fixed="right"
            label="操作"
          >
            <template slot-scope="scope">

              <el-button type="text" size="small" class="View_BUtton" @click="editinfo(scope.row.id)">查看</el-button>

            </template>
          </el-table-column>

        </el-table>
        <div class="block" style="text-align: center; margin-top: 20px;">

          <el-pagination
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="cartForm.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>

      </div></el-col>
    </el-row>

  </div></template>

<script>
import { getPlaces, renderBack } from '@/api/cart'
import { transTreeD } from '@/utils/index'

export default {
  data() {
    return {
      loading: true,

      time: null, // 时间
      cartForm: {

        intoStorageStartTime: '', // 起始时间
        intoStorageEndTime: '', // 结束时间
        transportTaskId: '', // 运输任务id
        startAgencyId: '', // 起始地id
        endAgencyId: '', // 目的地id
        isAvailable: '', // 车辆是否可用
        page: 1, // 页码
        pageSize: 10 // 每页多少数据
      },
      startAgency: '', // 起始地
      endAgency: '', // 目的地
      // 车辆是否可用数据
      cart_isAvailable: [
        { name: '全部', value: '' },
        { name: '可用', value: 'true' },
        { name: '不可用', value: 'false' }
      ],

      // 车辆管理基础分页数据渲染
      pagination: {
        // page: 1, // 页码
        // pageSize: 10, // 每页多少数据
        total: null // 总条数
      },
      currentPage4: 1,
      treeData: [
        // 树节点数据
      ],
      selectedNodeId: '',
      selectedNode: [],
      defaultCheckedKeys: [], // 默认选中的节点
      tableData: [], // 分页数据

      data: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created() {
    this.renderBack()
    this.getPlaces()
  },
  methods: {
    // 基础渲染
    async renderBack() {
      this.loading = true

      const result = await renderBack(
        // pageSize: this.pagination.pageSize,
        // page: this.pagination.page
        // pageSize: +this.cartForm.pageSize,
        // page: +this.cartForm.pag
        this.cartForm
      )
      console.log(result)
      this.tableData = result.items // 将返回的数据赋值给绑定的数组
      this.pagination.total = +result.counts
      console.log(this.pagination.total)
      this.loading = false
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.cartForm.pageSize = val
      this.renderBack()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.cartForm.page = val
      console.log(this.cartForm.page)
      this.renderBack()
    },
    // 机构树信息
    async getPlaces() {
      const result = await getPlaces()
      console.log(JSON.parse(result))
      // this.data = result
      this.data = transTreeD(JSON.parse(result))
      console.log(this.data)
    },
    // tree组件事件
    // 起始地机构
    beginPlace(data) {
      console.log(data)
      this.startAgency = data.name
      this.cartForm.startAgencyId = data.id
    },
    // 目的地机构
    endPlace(data) {
      console.log(data)
      this.endAgency = data.name
      this.cartForm.endAgencyId = data.id
    },
    // 点击查询  条件搜索
    inquire() {
      // 转换时间格式   自定义格式
      // function formatTime(date, format) {
      //   const year = date.getFullYear()
      //   const month = date.getMonth() + 1
      //   const day = date.getDate()
      //   const hour = date.getHours()
      //   const minute = date.getMinutes()
      //   const second = date.getSeconds()
      //   format = format.replace('yyyy', year)
      //   format = format.replace('MM', formatNumber(month))
      //   format = format.replace('dd', formatNumber(day))
      //   format = format.replace('HH', formatNumber(hour))
      //   format = format.replace('mm', formatNumber(minute))
      //   format = format.replace('ss', formatNumber(second))
      //   return format
      // }
      // function formatNumber(number) {
      //   return number.toString().padStart(2, '0')
      // }
      // time数组 第一个是起始时间 第二个是结束时间
      if (this.time !== null) {
        // this.cartForm.intoStorageStartTime = formatTime(this.cartForm.time[0], 'yyyy-MM-dd HH:mm:ss')
        // this.cartForm.intoStorageEndTime = formatTime(this.cartForm.time[1], 'yyyy-MM-dd HH:mm:ss')
        // this.cartForm.intoStorageStartTime = formatTime(this.time[0], 'yyyy-MM-dd HH:mm:ss')
        // this.cartForm.intoStorageEndTime = formatTime(this.time[1], 'yyyy-MM-dd HH:mm:ss')
        this.cartForm.intoStorageStartTime = this.time[0]
        this.cartForm.intoStorageEndTime = this.time[1]
        console.log(this.cartForm)
        this.renderBack()
      } else {
        this.renderBack()
      }
    },
    // 点击 重置
    reset() {
      this.cartForm.intoStorageStartTime = '' // 起始时间
      this.cartForm.intoStorageEndTime = '' // 结束时间
      this.cartForm.transportTaskId = '' // 运输任务id
      this.cartForm.startAgencyId = '' // 起始地id
      this.cartForm.endAgencyId = '' // 目的地id
      this.cartForm.isAvailable = '' // 车辆是否可用
      this.cartForm.page = 1 // 页码
      this.cartForm.pageSize = 10 // 每页多少数据
      this.renderBack()
    },
    // 点击查看跳转详情
    editinfo(id) {
      this.$router.push({
        path: '/car/editinfo/', query: { id: id }
      })
    }

  }
}

</script>

<style lang="scss" scoped>
  .el-row {
/*     margin-bottom: 20px; */
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark-Top {
    background: #fff;
    padding:10px 8px 0px 50px
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;

  }
  .row-bg {
    padding: 10px 0;
/*     background-color: #f9fafc; */
  }

.bg-purple{
  display: flex;
}

.View_BUtton{
  color: #419eff;
}
.row-bg2{
  margin-top: -20px;
  margin-left: 26px;
}
.row-bg3{
  margin-top: 20px;
  background-color: #fff;
  padding: 20px;
}
.grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    // margin-top: 20px;
    padding: 10px 0;
    background-color: #fff;
  }
  .row-bg_buttton{
    margin-top: 20px;
    padding: 0 0;
    background-color: #fff;
  }
  .row-bg_buttton .el-button{
    height: 50px;
    width: 120px;
  }
  // .el-table{
  //   border: 1px solid #ebeef5;
  // }
  .el-date-editor--datetimerange.el-input__inner{
    width: 190px;
  }
  .available{
    width: 5px;
    height: 5px;
    background-color: #1dc779;
    border-radius: 50%;
    margin-right: 5px;
  }
  .notavailable{
    width: 5px;
    height: 5px;
    background-color: #e15536;
    border-radius: 50%;
    margin-right: 5px;
  }
</style>

